<template>

  <div class="app-container">
    <!-- 标题标签 -->
    <el-card class="box">
      <div>试题录入</div>
    </el-card>
    <!-- 内容标签 -->
    <el-card shadow="never" class="box1">
      <div>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item label="学科：" prop="subjectID">
            <el-select
              v-model="ruleForm.subjectID"
              placeholder="请选择"
              class="one"
            >
              <el-option
                v-for="(item, index) in subjects"
                :key="index"
                :label="item.subjectName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="目录：" prop="catalogID">
            <el-select
              v-model="ruleForm.catalogID"
              placeholder="请选择"
              class="one"
            >
              <el-option
                v-for="(item, index) in directorys"
                :key="index"
                :label="item.directoryName"
                :value="item.subjectID"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="企业：" prop="enterpriseID">
            <el-select
              v-model="ruleForm.enterpriseID"
              placeholder="请选择"
              class="one"
            >
              <el-option
                v-for="(item, index) in companyList"
                :key="index"
                :label="item.company"
                :value="item.creatorID"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="城市：" prop="province" class="city-box">
            <el-select
              v-model="ruleForm.province"
              placeholder="请选择"
              class="city-1"
              @change="onProvince"
            >
              <el-option
                v-for="(item, index) in province"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
            <el-select
              v-model="ruleForm.city"
              placeholder="请选择"
              class="city-2"
            >
              <el-option
                v-for="(v, k, i) in citys"
                :key="i"
                :label="v"
                :value="v"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="方向：" prop="direction">
            <el-select
              v-model="ruleForm.direction"
              placeholder="请选择"
              class="one"
            >
              <el-option
                v-for="(item, index) in direction"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="题型：" prop="questionType">
            <el-radio-group v-model="ruleForm.quest">
              <el-radio
                v-for="(item, index) in questionType"
                :key="index"
                :value="item.value"
                :label="item.label"
                @change="can"
              ></el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="难度：" prop="difficulty">
            <el-radio-group v-model="ruleForm.difficulty">
              <el-radio
                v-for="(item, index) in difficulty"
                :key="index"
                :label="item"
                :value="index"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>

          <el-form-item label="题干：" prop="question">
            <!-- 使用 v-model 进行双向的数据绑定 -->
            <quill-editor
              v-model="ruleForm.question"
              ref="myQuillEditor"
              :options="editorOption"
            >
            </quill-editor>
          </el-form-item>

          <!-- 单选 -->
          <template v-if="ruleForm.quest == '单选'">
            <div v-for="(item, index) in arr" :key="index">
              <el-row v-if="index < 4">
                <el-col>
                  <el-form-item label-width="120px" label="选项：">
                    <el-row>
                      <el-col :span="1">
                        <el-radio :label="index" v-model="radio"
                          >{{ item.code }}：</el-radio
                        >
                      </el-col>
                      <el-col :span="5">
                        <el-input v-model="item.title"></el-input>
                      </el-col>
                      <el-col :span="10">
                        <el-upload
                          class="upload-demo"
                          action="#"
                          multiple
                          :limit="3"
                        >
                          <el-button class="upload_btn">点击上传</el-button>
                        </el-upload>
                      </el-col>
                    </el-row>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <el-row>
              <el-col>
                <el-button
                  class="add_btn"
                  type="danger"
                  size="small"
                  @click="addItem"
                  disabled
                  >+增加选项与答案</el-button
                >
              </el-col>
            </el-row>
          </template>
          <!-- 多选 -->
          <template v-if="ruleForm.quest === '多选'">
            <div v-for="(item, index) in arr" :key="index">
              <el-checkbox-group v-model="checkList">
                <el-row v-if="index < questionIndex">
                  <el-col>
                    <el-form-item label-width="120px" label="选项：">
                      <el-row>
                        <el-col :span="1">
                          <el-checkbox :label="index">{{
                            item.code
                          }}</el-checkbox>
                        </el-col>
                        <el-col :span="5">
                          <el-input v-model="item.title"></el-input>
                        </el-col>
                        <el-col :span="10">
                          <el-upload
                            class="upload-demo"
                            action="#"
                            multiple
                            :limit="3"
                          >
                            <el-button class="upload_btn">点击上传</el-button>
                          </el-upload>
                        </el-col>
                      </el-row>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-checkbox-group>
            </div>
            <el-row>
              <el-col>
                <el-button
                  class="add_btn"
                  type="danger"
                  size="small"
                  @click="addItem"
                  >+增加选项与答案</el-button
                >
              </el-col>
            </el-row>
          </template>

          <el-form-item label="解析视频：" prop="videoURL">
            <el-input v-model="ruleForm.videoURL" class="one"></el-input>
          </el-form-item>

          <el-form-item label="答案解析：" prop="answer">
            <!-- 使用 v-model 进行双向的数据绑定 -->
            <quill-editor
              v-model="ruleForm.answer"
              ref="myTextEditor"
              :options="editorOption"
            >
            </quill-editor>
          </el-form-item>

          <el-form-item label="题目备注：" prop="remarks">
            <el-input
              type="textarea"
              v-model="ruleForm.remarks"
              class="two"
              :rows="2"
              resize="none"
            ></el-input>
          </el-form-item>

          <el-form-item label="试题标签：" prop="tags">
            <el-select
              v-model="ruleForm.tags"
              placeholder="请选择试题标签"
              class="one"
            >
              <el-option
                v-for="(item, index) in tagList"
                :key="index"
                :label="item.tagName"
                :value="item.tagName"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button  type="primary" @click="onSubmit"
              >确定提交</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-card>
      </div>
</template>

<script>
// 企业接口
import { list as companys } from '@/api/hmmm/companys'
// 学科接口
import { list } from '@/api/hmmm/subjects'
// 目录接口
import { list as directory } from '@/api/hmmm/directorys'
// 批量导入题
import { add, question } from '@/api/hmmm/questions'
// 导入城市和区域/县
import { provinces, citys } from '@/api/hmmm/citys'
// 方向接口
import { direction, questionType, difficulty } from '@/api/hmmm/constants'
// 标签接口
import { list as tag } from '@/api/hmmm/tags'
export default {
  data () {
    return {
      // 保存基础题库传入的id
      // questionsid: this.$route.query.name,
      key: 1,
      // 复选框列表
      checkList: [],
      // 选项存储的index
      questionIndex: 4,
      // 单选
      radio: '',
      // 存储选项的数组
      arr: [
        {
          code: 'A', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案 true/false
        },
        {
          code: 'B', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案 true/false
        },
        {
          code: 'C', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案 true/false
        },
        {
          code: 'D', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案 true/false
        },
        {
          code: 'E', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案 true/false
        },
        {
          code: 'F', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案 true/false
        },
        {
          code: 'G', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案 true/false
        },
        {
          code: 'H', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案 true/false
        },
        {
          code: 'I', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案 true/false
        },
        {
          code: 'J', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案 true/false
        },
        {
          code: 'K', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案 true/false
        },
        {
          code: 'L', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案 true/false
        },
        {
          code: 'M', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案 true/false
        },
        {
          code: 'N', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案 true/false
        },
        {
          code: 'O', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案 true/false
        },
        {
          code: 'P', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案 true/false
        },
        {
          code: 'Q', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案 true/false
        },
        {
          code: 'R', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案 true/false
        },
        {
          code: 'S', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案 true/false
        },
        {
          code: 'T', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案 true/false
        },
        {
          code: 'U', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案 true/false
        },
        {
          code: 'V', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案 true/false
        },
        {
          code: 'W', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案 true/false
        },
        {
          code: 'X', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案 true/false
        },
        {
          code: 'Y', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案 true/false
        },
        {
          code: 'Z', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案 true/false
        }
      ],
      // 标签列表
      tagList: [],
      // 难度
      questionType: [],
      // 试题类型
      difficulty: [],
      // 企业列表
      companyList: [],
      // 方向
      direction: [],
      // 区域列表
      citys: [],
      // 城市列表
      province: provinces(),
      // 二级目录列表
      directorys: [],
      // 学科列表
      subjects: [],

      // 目录列表
      ruleForm: {
        subjectID: '', // 学科
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        city: '', // 地区
        province: '', // 城市
        direction: '', // 方向
        quest: '', // 题型
        difficulty: '', // 难度
        remarks: '', // 题目备注
        question: '', // 题干的内容
        // 选项
        options: {
          code: '',
          title: '',
          img: '',
          isRight: ''
        },
        answer: '', // 答案解析
        videoURL: '', // 解析视频
        // remarks: '', // 题目备注
        tags: '' // 试题标签
      },
      // 富文本功能编辑
      question: null,
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['blockquote', 'code-block'],
            ['image', 'link']
          ]
        }
      },
      // 表单的效验规则
      rules: {
        subjectID: [
          { required: true, message: '学科不能为空', trigger: 'change' }
        ],
        catalogID: [
          { required: true, message: '目录不能为空', trigger: 'change' }
        ],
        enterpriseID: [
          { required: true, message: '企业不能为空', trigger: 'change' }
        ],
        province: [
          { required: true, message: '城市不能为空', trigger: 'change' }
        ],
        city: [{ required: true, message: '地区不能为空', trigger: 'change' }],
        direction: [
          { required: true, message: '方向不能为空', trigger: 'change' }
        ],
        questionType: [
          { required: true, message: '题型不能为空', trigger: 'change' }
        ],
        difficulty: [
          { required: true, message: '难度不能为空', trigger: 'change' }
        ],
        question: [
          { required: true, message: '题干不能为空', trigger: 'blur' }
        ],
        answer: [
          { required: true, message: '答案解析不能为空', trigger: 'blur' }
        ],
        tags: [{ required: true, message: '题型不能为空', trigger: 'change' }]
      }
    }
  },
  created () {
    // 获取学科
    this.getSubjectList()
    // 获取目录
    this.getDirectoryList()
    // 获取企业
    this.getCompanys()
    // 获取方向
    this.getDirection()
    // 获取题型
    this.getQuestionType()
    // 获取难度
    this.getDifficulty()
    // 获取标签
    this.getTag()
  },
  methods: {
    // 添加选项
    addItem () {
      if (this.questionIndex > 25) {
        return
      }
      this.questionIndex++
    },
    async getQuestionsInfo () {
      if (this.$route.query.id) {
        const { data: res } = await question.detail({
          id: this.$route.query.id
        })
        // 数据替换到 form
        this.ruleForm = res
        // 标签改成数组
        this.ruleForm.tags = res.tags.split(',')
        this.questionIndex = this.ruleForm.options.length

        switch (this.ruleForm.questionType) {
          // 单选
          case '1':
            this.ruleForm.options.forEach((item, index) => {
              if (item.isRight === 1) {
                this.radio = index
              }
            })
            break
          // 多选
          case '2':
            this.ruleForm.options.forEach((item, index) => {
              if (item.isRight === 1) {
                this.checkList.push(index)
              }
            })
            break
        }
      }
    },
    // 获取学科列表
    async getSubjectList () {
      const xk = await list()
      this.subjects = xk.data.items
    },
    // 获取目录
    async getDirectoryList () {
      const ml = await directory()
      this.directorys = ml.data.items
    },
    // 获取标签
    async getTag () {
      const bq = await tag()
      console.log('标签', bq)
      this.tagList = bq.data.items
    },
    // 获取企业列表
    async getCompanys () {
      const qy = await companys()
      console.log('企业', qy)
      this.companyList = qy.data.items
    },
    // 获取方向列表
    getDirection () {
      this.direction = direction
    },
    // 获取城市
    onProvince (val) {
      this.ruleForm.city = ''
      this.citys = citys(val)
    },
    // 获取题型
    getQuestionType () {
      this.questionType = questionType
    },
    // 获取难度
    getDifficulty () {
      this.difficulty = difficulty
    },
    onSubmit () {
      this.$refs.ruleForm.validate(async (val) => {
        if (val) {
          await add(this.ruleForm)
          this.$message.success('添加成功')
        } else {
          return false
        }
      })
    }
    // 表单预校验
    // can (val) {
    //   console.log('zhi', val)
    //   console.log('sj', this.questionType)
    //   console.log('hj', this.ruleForm.quest)
    // }
  }
}
</script>

<style  scoped>
.box {
  width: 100%;
  height: 55px;
  padding: 0px;
  border-bottom: 0px solid #ebeef5;
}
.box1 {
  margin-top: -2px;
}
.one {
  width: 400px;
}
.two {
  width: 400px;
  height: 40%;
}
.three {
  width: 240px;
  margin: 15px 0px;
}
.four {
  display: inline-block;
}
.city-1 {
  width: 197px;
  margin-right: 6px;
}
.city-2 {
  width: 197px;
}
avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.upload-demo {
  margin-left: 20px;
  display: inline-block;
}
.upload_btn {
  margin-top: -10px;
  height: 50px;
}
::v-deep .ql-editor {
  min-height: 200px;
}
</style>
